<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="程月">
    <title>菜单</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        nav {
            width: 100%;
            height: 60px;
            background-color: #fff;
        }
        main{
            width: 100%;
            height: 1222px;
            background-color: #ccc;
        }

        .container {
            width: 1500px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            line-height: 60px;
        }

        .container>li{
            position: relative;
        }
        .container>li>a {
            text-decoration: none;
            color: #666;
            padding: 0 10px;
            font-size: 17px;
        }

        .container .li-1 a {
            display: block;
            height: 96%;
            color: lightskyblue;
            border-bottom: 3px solid #74b0d3;
        }

        .container .li-1 a:hover {
            color: lightskyblue;
        }

        .container a:hover {
            color: red;
        }
        .ul-1{
            width: 270px;
            height: 150px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            border: 1px solid #eee; 
            background-color: #fff;
            position: absolute;
            margin-left: -110px;
            top: 52px;
            /* display: none; */
            /* opacity: 0; */
             visibility: hidden;
        }
        .ul-2{
            height: 150px;
            border: 1px solid #eee; 
            background-color: #fff;
            position: absolute;
            margin-left: -25px; 
            top: 52px;
            /* display: none; */
            /* opacity: 0; */
            visibility: hidden;
        }
        .ul-2 .img{
            left:55px;
        }
        .ul-1 li{
            line-height: 30px;
            width: 115px;
            height: 30px;
            margin-left: 10px;
        }
        .ul-2 li{
            line-height: 35px;
            width: 85px;
            height: 35px;
            margin-left: 30px;
        }
        .ul-2 li a,
        .ul-1 li a{
            text-decoration: none;
            color: #666;
            font-size: 17px;
        }
        .img{
            position: absolute;
            top:-9px;
            left: 127px;
            display: inline-block;
            width: 15px;
            height: 10px;
            background-image: url('header_3091d80.png');
            background-position: -110px 0;
           
        }
        .tran:hover .img-1{
            transform: rotate(180deg);
        }
        .img-1{
            position: absolute;
            display: inline-block;
            width: 10px;
            height: 5px;
            background-image: url('header_3091d80.png');
            background-position: -60px 0;
            top:30px;
            left:50px;
            transition: all 0.1s linear;
        }
    </style>
</head>

<body>
    <nav>
        <ul class="container">
            <li class="li-1"><a href="#">首页</a></li>
            <li   class="con">
                <a href="#">剧集</a>
                <ul class="ul ul-1">
                    <span class="img"></span>
                    <li><a href="#">楚乔传 TV版</a></li>
                    <li><a href="#">春风十里不...</a></li>
                    <li><a href="#">镇魂街 第一季</a></li>
                    <li><a href="#">我的前半生</a></li>
                    <li><a href="#">醉玲珑</a></li>
                    <li><a href="#">微微一笑很...</a></li>
                    <li><a href="#">终极三国2017</a></li>
                    <li><a href="#">龙珠传奇</a></li>
                </ul>
            </li>
            <li   class="con">
                <a href="#">电影</a>
                <ul class="ul ul-1">
                    <span class="img"></span>
                    <li><a href="#">速度与激情8</a></li>
                    <li><a href="#">人间大炮</a></li>
                    <li><a href="#">战狼</a></li>
                    <li><a href="#">杀破狼2</a></li>
                    <li><a href="#">逆时营救</a></li>
                    <li><a href="#">记忆大师</a></li>
                    <li><a href="#">我的外星女友</a></li>
                    <li><a href="#">有部电影</a></li>
                </ul>
            </li>
            <li   class="con">
                <a href="#">综艺</a>
                <ul class="ul ul-1">
                    <span class="img"></span>
                    <li><a href="#">极限挑战 第...</a></li>
                    <li><a href="#">挑战者联盟...</a></li>
                    <li><a href="#">脑洞大开 第...</a></li>
                    <li><a href="#">火星情报局...</a></li>
                    <li><a href="#">暴走漫画——...</a></li>
                    <li><a href="#">日日煮 2017</a></li>
                    <li><a href="#">开心俱乐部...</a></li>
                    <li><a href="#">举杯呵呵喝...</a></li>
                </ul>
            </li>
            <li><a href="#">音乐</a></li>
            <li class="con">
                <a href="#" >少儿</a>
                 <ul class="ul ul-1">
                    <span class="img"></span>
                    <li><a href="#">宝狄与好友...</a></li>
                    <li><a href="#">小猪佩奇</a></li>
                    <li><a href="#">纳米核心 第...</a></li>
                    <li><a href="#">汪汪队立大...</a></li>
                    <li><a href="#">我的汤姆猫</a></li>
                    <li><a href="#">会说话的家族</a></li>
                    <li><a href="#">小玲玩具</a></li>
                    <li><a href="#">棉花糖和云...</a></li>
                </ul>
            </li>
            <li><a href="#">来疯</a></li>
            <li><a href="#">直播</a></li>
            <li><a href="#">片库</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">纪实</a></li>
            <li><a href="#">公益</a></li>
            <li><a href="#">体育</a></li>
            <li><a href="#">汽车</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">财经</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">文化</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">搞笑</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">亲子</a></li>
            <li><a href="#">教育</a></li>
            <li><a href="#">游戏</a></li>
            <li class="tran  con">
                <a href="#">更多</a>
                <span class="img-1"></span>
                <ul class="ul ul-2">
                    <span class="img"></span>
                    <li><a href="#">VR</a></li>
                    <li><a href="#">生活</a></li>
                    <li><a href="#">原创</a></li>
                    <li><a href="#">排行</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <main>
        
    </main>
</body>

</html>
<script>
    var li = document.querySelectorAll('.con');
    var info = document.querySelectorAll('.ul');

   
        for(var i = 0;i < li.length; i ++){
            li[i].index = i;
            li[i].onmouseover = function () {
            info[this.index].style.visibility = 'visible';
        }
        li[i].onmouseout = function () {
            info[this.index].style. visibility = 'hidden';
        }
    }
</script>